<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>123</title> 
  <style>

body{ margin:0;}
.out_warp{ position:relative; width:860px; height:400px; background:#ccc; margin: 100px auto 0 auto;z-index:-99;}
.left{width:520px; height:260px; background:#F63;position:absolute;  top:70px;left:0; z-index:0;}
.cont{width:680px; height:340px; max-height:340px; max-width:680px; background:#096; position:absolute;top:30px;left:90px;  z-index:1;}
.right{width:520px; height:260px; background:#939;position:absolute;top:70px;left:340px; z-index:0;}
</style> 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
 </head> 
 <body> 
  <div id="out_warp" class="out_warp"> 
   <div id="left" class="left" flat="">
    111
   </div> 
   <div id="cont" class="cont" flat="">
   222
   </div> 
   <div id="right" class="right" flat="">
    333
   </div> 
  </div> 
  <div class="button">
   <input type="button" value="左" id="button_left" /> 
   <input type="button" value="右" id="button_right" /> 
   <input type="button" value="信息" id="button2" onclick="one();" /> 
  </div> 
  <script type="text/javascript" language="javascript">



    $(function(){

                 init();//初始化

                 

                 function init(){

                 $('.right').attr('flat', 'right'); 

                 $('.left').attr('flat', 'left'); 

                $('.cont').attr('flat', 'cont');  }  ;

                  

               $("#button2").click(function(){ alert('left:'+$('.left').attr('flat')+'      cont:'+$('.cont').attr('flat')+'      right:'+$('.right').attr('flat')); });

               

               

               //记录移动对象，用于区分

                var left_move;       //记录左边的对象

                var cont_move;        //记录中间的对象

                var right_move;        //记录右边的对象

                   var flat;          //判断按了左或是右

                     ///     /切换动画后，修改flat标识,该赋值方式为向左转                    

                var to_left=function(){

                                 left_move.attr('flat', 'right');//左图层变成右

                                 cont_move.attr('flat', 'left');//中间边左边

                                 right_move.attr('flat', 'cont');//右边边中间

                                

                                };

                                            //向右转

                                            

                                var to_right=function(){

                                 left_move.attr('flat', 'cont');//左图层变成右

                                 cont_move.attr('flat', 'right');//中间边左边

                                 right_move.attr('flat', 'left');//右边边中间

                                

                                };         

                     

                     //

                     

                         //判定当前的图层块，并做对应的操作

                                        function left_obj(){

                                                left_move=$("[flat=left]");//取得左边对象，进行记录

                                                

                                                if(flat=="left"){

                                                    left_move.animate({ 

                                                        left:"340px",//最右边的左边

                                                           width: "520px",

                                                           height: "260px", 

                                                         }, 10 );//10,以最快的速度变换位置

                                                    left_move.css("z-index","0");

                                                    }else if(flat=="right"){

                                                        left_move.animate({ 

                                                        left:"90px",//中间

                                                        top:"30px",

                                                           width: "680px",

                                                           height: "340px", 

                                                         }, 150 );

                                                        left_move.css("z-index","11");

                                                        }

                                                     

                                                     

                                                         

                                        

                                        }//end left 

                                            

                                            function right_obj(){

                                                right_move=$("[flat=right]");

                                                if(flat=="left"){

                                                    right_move.animate({ 

                                                        left:"90px", /*中间*/

                                                        top:"30px",    

                                                           width: "680px",

                                                           height: "340px", 

                                                         }, 150 );

                                                     right_move.css("z-index","1"); //最高层     

                                                    }else if(flat=="right"){

                                                        right_move.animate({ 

                                                        left:"0",//最左边对象位置

                                                        top:"70px",

                                                           width: "520px",

                                                           height: "260px", 

                                                         }, 10 );//10,以最快的速度变换位置

                                                     right_move.css("z-index","0");

                                                        }

                                                

                                        

                                                

                                                }//end right

                                            

                                            function cont_obj(){

                                                cont_move=$("[flat=cont]");

                                                if(flat=="left"){

                                                    cont_move.animate({ 

                                                        left:"0",

                                                        top:"70px",

                                                           width: "520px",

                                                           height: "260px", 

                                                         }, 100 );

                                                     

                                                    }else if(flat=="right"){

                                                        cont_move.animate({ 

                                                        left:"340px",

                                                        top:"70px",

                                                           width: "520px",

                                                           height: "260px", 

                                                             }, 100 );

                                                        }

                                                       cont_move.css("z-index","0");

                                                }

                                            

                                            

                                            

                     

               $("#button_left").click(function(){

                                                flat="left";

                                                        left_obj();

                                                        right_obj();

                                                        cont_obj();

                                                        to_left();

                                                       })

               

               $("#button_right").click(function(){

                                              flat="right";

                                                        left_obj();

                                                        right_obj();

                                                        cont_obj();

                                                        to_right();

                                                       })

               

               

               

               });

      </script>   
 </body>
</html>